import React, { Component } from 'react'
import PageLayout from '../../PageLayout'
import { Redirect, Route, Switch as SwitchRouter } from 'react-router-dom'
import ProfilePage from './ProfilePage'
import SalaryPage from './SalaryPage'
import EditUserInfoPage from './EditUserInfoPage'
import { connect } from 'react-redux'
import { getUserInfoAsync } from '../../../_redux/actions_async'

class HomePage extends Component {
  constructor (props) {
    super(props)
  }

  componentWillMount () {
    this.props.getUserInfoAsync()
  }

  render () {
    let userId = this.props.userId
    if (userId === -1) return <Redirect to="/login"/>

    return (
      <PageLayout>
        <SwitchRouter>
          <Route exact path="/home">
            <h1>欢迎使用薪酬管理系统</h1>
          </Route>
          <Route exact path="/home/:userId" component={ProfilePage}/>
          <Route exact path="/home/:userId/salary" component={SalaryPage}/>
          <Route exact path="/home/:userId/edit" component={EditUserInfoPage}/>
          <Redirect to={`/home/${userId}`}/>
        </SwitchRouter>
      </PageLayout>
    )
  }
}

HomePage.propTypes = {}

HomePage = connect(
  ({ $UserState: { userId } }) => ({ userId }),
  { getUserInfoAsync }
)(HomePage)

export default HomePage
